<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ModelScope Studio Web Sandbox Preview</title>
    <script type="importmap">
      {
        "imports": {{ importMap }}
      }
    </script>
    {{ stylesheet }}
  </head>
  <body>
    <div id="root"></div>
    <script>
      window.addEventListener('error', (e) => {
        window.parent.postMessage({
          type: 'sandbox-error',
          message: e.message,
        });
      });

      window.addEventListener('DOMContentLoaded', () => {
        window.parent.postMessage({
          type: 'sandbox-ready',
        });
      });
    </script>
    <script type="module">
      import React, { useState, useEffect } from 'react';
      import ReactDOM from 'react-dom/client';
      import * as entryModule from '{{ entryFile }}';

      if (entryModule.default && typeof entryModule.default === 'function') {
        ReactDOM.createRoot(document.getElementById('root')).render(
          React.createElement(entryModule.default)
        );
      }
    </script>
  </body>
</html>
